<template>
  <div>
    <van-sticky>
      <div style="display: flex;align-items: center;justify-content: space-between;padding: 16px 10px;background:#f5f5f5;">
        <div @click="back()">
          <van-icon name="arrow-left" />
        </div>
        <div>{{ queryInfo.attnDate }}</div>
        <div> </div>
      </div>
      <van-dropdown-menu active-color="#5D5DEF">
        <van-dropdown-item ref="item" :title="searchShow">
          <!-- // { text: '全部学生', value: '' }, -->
          <van-cell v-for="(item, index) in option1" :key="item.value" center :title="item.text" @click="selectOption(item)">
            <template #title>
              <div style="display: flex; align-items: center;">
                <span :class="{[item.color]:true,'selectC':true}"></span> {{ item.text }}
              </div>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="tableTitle">
        <van-grid :column-num="3">
          <van-grid-item text="学生姓名" />
          <van-grid-item text="年级" />
          <van-grid-item text="班级" />
        </van-grid>
      </div>
    </van-sticky>
    <div v-for="(item, index) in stuList" :key="index" class="oneStudent">
      <van-grid :column-num="3">
        <van-grid-item :text="item.stud_name">
          <template #text>
            <span
              :class="{ 'studentStatus': true, 'late': item.status_name == '迟到', 'skippi': item.status_name == '旷课', 'compassionate': item.status_name == '事假', 'sickLeave': item.status_name == '病假' }"
            ></span>
            <span style="font-size: 12px;">{{ item.stud_name }}</span>
          </template>
        </van-grid-item>
        <van-grid-item :text="item.grade_name" />
        <van-grid-item :text="item.class_name" />
      </van-grid>
    </div>
    <van-empty v-if="stuList.length == 0" image="search" :description="'暂无' + (searchName=='全部学生'?'':searchName) + '学生数据！'" />
  </div>
</template>
<script>
import { Cell, CellGroup, Toast, Icon } from 'vant';
import { Button, Sticky, Empty, Dialog } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
import { Popup, Picker } from 'vant';
import { Grid, GridItem } from 'vant';


// import uploadWxImage from '../../util/imgUp/upload'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Icon.name]: Icon,
    [Empty.name]: Empty

  },
  data() {
    return {
      errorImg: require("../../assets/img/error.jpg"),
      okImg: require("../../assets/img/ok.jpg"),
      stuList: [],
      searchName: '全部学生',
      searchShow: '全部学生',
      option1: [
        { text: '全部学生', value: '' },
        { text: '迟到学生', value: '迟到',color:'late'},
        { text: '旷课学生', value: '旷课',color:'skippi'},
        { text: '事假学生', value: '事假',color:'compassionate' },
        { text: '病假学生', value: '病假',color:'sickLeave' },
      ],
      allData: [],
      queryInfo: {}
    };
  }, created() {

  }, beforeDestroy() {

  }, mounted() {
    //缓存计划信息
    this.queryInfo = JSON.parse(decodeURI(this.$route.query.parameter));
    console.log(this.queryInfo)
    this.leaveInfoSub()
  }, methods: {
    filterData() {
      if (this.searchName) {
        this.stuList = this.allData.filter(item => item.status_name == this.searchName)
      } else {
        this.stuList = this.allData
      }
    },
    selectOption(item){
      this.searchName=item.value
      this.searchShow=item.text
      this.$refs.item.toggle();
      this.filterData()
    },
    back(){
      window.history.back()
    },
    //查询列表
    async leaveInfoSub() {
      Toast.loading({
        message: '查询中...',
        forbidClick: true,
        overlay: true,
      });
      // 提交格式 一个表现下的题放到一起~
      const nowStudent = this.studentInfo
      const parameter = {
        "search_date": this.queryInfo.attnDate,
        "stud_name": "",
        "grade_id": "",
        "class_id": ""
      }
      const res = await this.$api.echarts.list.get(parameter);
      Toast.clear()
      if (res.code === 200) {
        this.stuList = res.data
        this.allData = res.data
      } else {
        Dialog.alert({
          message: res.message,
        })
      }
    }
  }
};
</script>
<style>
.tableTitle .van-grid .van-grid-item .van-grid-item__content {
    background: #dfe0ff;
    color: #3f4851;
    font-weight: bold;
}

.oneStudent:nth-child(odd) {
    background-color: #f1f1f1;
}

.oneStudent:nth-child(odd) .van-grid .van-grid-item .van-grid-item__content {
    background-color: #f8f8f9;
}

.van-grid-item__content {
    padding: 8px 0px;
}

.studentStatus {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    right: 1vw;
    top: 3vw;
}
.selectC {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 5px;
}

.late {
    background-color: #ff9800;
}

.skippi {
    background-color: #f32b43;
}

.compassionate {
    background-color: #4D5EBA;
}

.sickLeave {
    background-color: #FF75A4;
}
</style>